<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>hello</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <!--<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/clappr@latest/dist/clappr.min.js"></script>-->


    <link href="/lib/video-js.css" rel="stylesheet"/>
    <script src="/lib/video.js" type="text/javascript"></script>

    <!-- <link href="http://vjs.zencdn.net/vjs-version/video-js.css" rel="stylesheet"> -->

    <!--<link type="text/css" rel="stylesheet" href="http://vjs.zencdn.net/5.4.4/video-js.css"/>-->
    <!--<script src="http://vjs.zencdn.net/5.4.4/video.js"></script>-->

    <!--<link rel="stylesheet" type="text/css" href="/lib/slicebox/slicebox.css" />-->
    <link rel="stylesheet" type="text/css" href="/lib/bootstrap.ext.css" />

    <script type="text/javascript" src="/lib/slicebox/modernizr.custom.46884.js"></script>


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/lib/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="/lib/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/lib/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet"
  href="/lib/animate.min.css">


    <style type="text/css">
  #overlay {
      position: absolute;
      bottom: 30px;
      width:100%;
      text-align: center;
      font-size: 20px;
      z-index: 2147483647;
    }

#overlayStat {
    /*position: absolute;*/
    /*top: 50px;*/
    margin-top:20pt;
    color: white;
    width:100%;
    text-align: center;
    font-size: 20px;
    z-index: 2147483647;
    margin-bottom:20pt;
}

.stat-content{
    height:60pt;
    /*background-color: rgba(221, 221, 221, 0.3);3*/
}

  #overlayCountdown {
      position: absolute;
      right: 30px;
      bottom:30px;
      width:100%;
      text-align: right;
      font-size: 50px;
      z-index: 2147483649;
  }
    
.vjs-default-skin.vjs-paused .vjs-big-play-button
{
    display: none;
}
.img-mood-emotion{
    width:198pt;
    height:60pt;
    border:0;
    margin:15pt;
    background-color:transparent;
}

  .img-mood-emotion-img{
      width:125pt;
      height:50pt;
      padding:8pt;
      margin-bottom:0pt;
      margin-top:0pt;
  }

  .img-mood-emotion-arrow{
      width:50pt;
      height:35pt;
  }

.img-emotion{
    width:100pt;
}
.transition-img{
    width:150pt;
    height:150pt;
    margin-bottom:10pt;
}
.div-emotion{
    text-align: center;
}

  .div-stat-sum{
      /*padding: 8pt;*/
      background-color: green;
      font-family: "楷体","楷体_GB2312";
      font-size:40pt;
      color:white;
      /*margin-left:0pt;*/
  }

  .div-stat{
      /*padding: 8pt;*/
      background-color: transparent;
      margin-left:20pt;
      margin-top:5pt;
      font-size:22pt;
      width:100%;
      font-family: "楷体","楷体_GB2312";
      color:white;
  }

  .div-stat-title{
      /*padding: 8pt;*/
      background-color: transparent;
      margin-left:10pt;
      font-size:37pt;
      padding:0pt;
      width:100%;
      font-family: "楷体","楷体_GB2312";
      color:white;
  }

  .text-stat{
      /*padding-top:1pt;*/
      /*padding-bottom:1pt;*/
      margin-top:5pt;
      font-size:13pt;
      color:white;
  }

  .center-text-countdown{
      font-family: "楷体","楷体_GB2312";
      font-size:150pt;
      color:white;
      margin-left:335pt;
  }

  .center-text-waiting{
      font-family: "楷体","楷体_GB2312";
      font-size:160pt;
      color:white;
      margin-left:495pt;
  }

  .center-text-countdown-finish{
      font-family: "楷体","楷体_GB2312";
      font-size:40pt;
      color:white;
      margin-left:680pt;
  }

  .div-transition{
      /*padding: 0pt;*/
      /*border: 0pt;

      */
      width:185pt;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      /*border:1px solid #000;*/
  }

  .rotate {
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);

      /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
      -webkit-transform-origin: 50% 50%;
      -moz-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
      -o-transform-origin: 50% 50%;
      transform-origin: 50% 50%;

      /* Should be unset in IE9+ I think. */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }

  .vertical-center {

      display: flex;
      align-items: center;
  }

  ::-webkit-scrollbar{
      display:none;
  }
    </style>



</head>
<body style="background-color:black ">

<div id="consoleLog" ></div>


<div class=" vertical-center stat-content">

    <div id="overlayStat" class="row text-center" >

        <div class="text-center" style="background-color: pink">
                <div class="col-md-1-20 text-center" >
                    <div  class="div-stat-title rotate">情</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div  class="div-stat-title rotate">绪</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div  class="div-stat-title rotate">人</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div  class="div-stat-title rotate">数</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div  class="div-stat-title rotate">累</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div  class="div-stat-title rotate">计</div>
                </div>



                <div class="col-md-1-20 text-center" style="background-color: transparent">
                    <div id="divStat1" class="div-stat rotate center-block">惊讶</div>
                </div>
                <div class="col-md-1-20 text-center">
                    <div id="textStat1" class="text-stat rotate center-block">0</div>
                </div>

                <div class="col-md-1-20 text-center" >
                    <div id="divStat2" class="div-stat rotate" >高兴</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div id="textStat2" class="text-stat rotate" >0</div>
                </div>

                <div class="col-md-1-20 text-center">
                    <div id="divStat3" class="div-stat rotate center-block">平静</div>
                </div>
                <div class="col-md-1-20 text-center">
                    <div id="textStat3" class="text-stat rotate center-block">0</div>
                </div>

                <div class="col-md-1-20 text-center">
                    <div id="divStat4" class="div-stat rotate">伤心</div>
                </div>
                <div class="col-md-1-20 text-center">
                    <div id="textStat4" class="text-stat rotate">0</div>
                </div>

                <div class="col-md-1-20 text-center" >
                    <div id="divStat5" class="div-stat rotate">厌恶</div>
                </div>
                <div class="col-md-1-20 text-center">
                    <div id="textStat5" class="text-stat rotate">0</div>
                </div>

                <div class="col-md-1-20 text-center">
                    <div id="divStat6" class="div-stat rotate">生气</div>
                </div>
                <div class="col-md-1-20 text-center">
                    <div id="textStat6" class="text-stat rotate">99999人</div>
                </div>

                <div class="col-md-1-20 text-center" >
                    <div id="divStat7" class="div-stat rotate">害怕</div>
                </div>
                <div class="col-md-1-20 text-center" >
                    <div id="textStat7" class="text-stat rotate">0</div>
                </div>
        </div>

    </div>

</div>

<div id="divTransition" class="row"  style="background-color:transparent;padding:0pt;margin-left:15pt;margin-top:50pt;height:270pt;" >

    <div class="col-md-1-5 div-transition text-center" style="background-color:transparent">
        <img id="imgArrowUp1"  class="img-mood-emotion-arrow">
        <img id="imgMood1"  class="img-mood-emotion-img" style="background-color:transparent">
        <img class="transition-img" id="transition-1" src="http://localhost:8088/res/2018-02-25_01.36.36_cut__1519493799039.png"></img>
        <img id="imgArrowDown1"  class="img-mood-emotion-arrow">
    </div>
    <div class="col-md-1-5 div-transition" >
        <img id="imgArrowUp2"  class="img-mood-emotion-arrow">
        <img id="imgMood2" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-2" src="http://localhost:8088/res/2018-02-25_01.36.36_cut__1519493799039.png"></img>
        <img id="imgArrowDown2"  class="img-mood-emotion-arrow">
    </div>
    <div class="col-md-1-5 div-transition" >
        <img id="imgArrowUp3"  class="img-mood-emotion-arrow">
        <img id="imgMood3" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-3" src="http://localhost:8088/res/2018-05-04_10.04.12_cut__1525399458705.png"></img>
        <img id="imgArrowDown3"  class="img-mood-emotion-arrow">
    </div>
    <div class="col-md-1-5 div-transition">
        <img id="imgArrowUp4"  class="img-mood-emotion-arrow">
        <img id="imgMood4" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-4" src="http://localhost:8088/res/2018-05-04_10.04.12_cut__1525399458705.png"></img>
        <img id="imgArrowDown4"  class="img-mood-emotion-arrow">
    </div>
    <div class="col-md-1-5 div-transition">
        <img id="imgArrowUp5"  class="img-mood-emotion-arrow">
        <img id="imgMood5" class="img-mood-emotion-img">
        <img class="transition-img" id="transition-5" src="http://localhost:8088/res/2018-05-04_10.04.12_cut__1525399458705.png"></img>
        <img id="imgArrowDown5"  class="img-mood-emotion-arrow">
    </div>


</div>

<div id="divWaiting" class="row"  style="background-color:transparent;height:100pt;">

    <div class="col-xs-1">

    </div>
    <div class="col-xs-10 text-center rotate" >
        <div id="textWaiting" class="center-text-waiting">你<br/>好<br/>吗</div>
    </div>

    <div class="col-xs-1">

    </div>

</div>


<div id="divTransitionFinish" class="row"  style="background-color:transparent;height:100pt;margin-top:50pt;">

    <div class="col-xs-1">

    </div>
    <div class="col-xs-10 text-center rotate" style="background-color:transparent">
        <div id="textTransitionFinish" class="center-text-countdown-finish" style="padding-top:0pt;"></div>
    </div>
    <div class="col-xs-1">

    </div>
</div>




<script src="/lib/socket.io.js"></script>
<script src="/lib/moment.min.js"></script>
<script src="/js/app.js"></script>
<script src="/lib/jquery-2.1.4.min.js"></script>


<script>

    var flashArrowInterval;

    var isProcessingFace = false;

    window.onload = function(){

    };

    var socket =  io.connect(ServerUrl);


    socket.on('connect', function() {
        console.log("Client has connected to the server!");
        isProcessingFace = false;
        $("#divWaiting").show();
        $("#divTransition").hide();
        $("#divTransitionFinish").hide();
    });

    socket.on('lock', function() {
        console.log("server is locked");

        $("#divWaiting").show();
        $("#divTransition").hide();
        $("#divTransitionFinish").hide();
        $('#textWaiting').html("不<br/>在<br/>服<br/>务");

    });

    socket.on('next-round', function(data) {
        console.log("next-round");
        isProcessingFace = false;

        clearInterval(flashArrowInterval);

        $("#divWaiting").show();
        $('#textWaiting').html("你<br/>好<br/>吗");
        $("#divTransition").hide();
        $("#divTransitionFinish").hide();
    });

    socket.on('start', function() {
        console.log("play start!");
    });

    socket.on('play-video', function(data) {
        console.log("play-video " + data.index);
        faceCheckCount = 0;
    });

    socket.on('face', function(data) {
        clearInterval(flashArrowInterval);
        
        console.log(data);
        if(data == null)
            return;

        var faces = data.result.faces;
        console.log("face count " + faces.length);

        $('#imgArrowUp1').removeClass('animated fadeIn');
        $('#imgArrowUp2').removeClass('animated fadeIn');
        $('#imgArrowUp3').removeClass('animated fadeIn');
        $('#imgArrowUp4').removeClass('animated fadeIn');
        $('#imgArrowUp5').removeClass('animated fadeIn');

        $('#imgArrowDown1').removeClass('animated fadeIn');
        $('#imgArrowDown2').removeClass('animated fadeIn');
        $('#imgArrowDown3').removeClass('animated fadeIn');
        $('#imgArrowDown4').removeClass('animated fadeIn');
        $('#imgArrowDown5').removeClass('animated fadeIn');


        $('#imgMood1').removeClass('animated fadeInUp');
        $('#imgMood2').removeClass('animated fadeInUp');
        $('#imgMood3').removeClass('animated fadeInUp');
        $('#imgMood4').removeClass('animated fadeInUp');
        $('#imgMood5').removeClass('animated fadeInUp');

        $('#transition-1').removeClass('animated bounceIn');
        $('#transition-2').removeClass('animated bounceIn');
        $('#transition-3').removeClass('animated bounceIn');
        $('#transition-4').removeClass('animated bounceIn');
        $('#transition-5').removeClass('animated bounceIn');

        if(faces.length == 0){
            $("#divWaiting").show();
            $("#divTransition").hide();
            $("#divTransitionFinish").hide();
            console.log("face length 0");
            isProcessingFace = false;
            return;
        }

        $('#imgArrowUp1').css("visibility","hidden");
        $('#imgArrowUp2').css("visibility","hidden");
        $('#imgArrowUp3').css("visibility","hidden");
        $('#imgArrowUp4').css("visibility","hidden");
        $('#imgArrowUp5').css("visibility","hidden");

        $('#imgArrowDown1').css("visibility","hidden");
        $('#imgArrowDown2').css("visibility","hidden");
        $('#imgArrowDown3').css("visibility","hidden");
        $('#imgArrowDown4').css("visibility","hidden");
        $('#imgArrowDown5').css("visibility","hidden");

        $('#imgMood1').hide();
        $('#imgMood2').hide();
        $('#imgMood3').hide();
        $('#imgMood4').hide();
        $('#imgMood5').hide();

        $('#transition-1').hide();
        $('#transition-2').hide();
        $('#transition-3').hide();
        $('#transition-4').hide();
        $('#transition-5').hide();

        initStat(data.stat);

        $("#textTransitionFinish").html("你<br/>的<br/>情<br/>绪<br/>会<br/>对<br/>应<br/>出<br/>不<br/>同<br/>的<br/>动<br/>画");
        $("#divTransition").show();
        $("#divTransitionFinish").show();
        $("#divWaiting").hide();

        setTimeout(function () {
            $("#textTransitionFinish").html("请<br/>耐<br/>心<br/>等<br/>待<br/><br/><br/>即<br/>将<br/>下<br/>次<br/>拍<br/>摄");
        },7000);

        var faces = data.result.faces;


        var faceCount = faces.length > FaceCount ? FaceCount : faces.length;

        for(var i = 0 ; i < faceCount ; ++i)
        {
            var face = faces[i];

            var emotion = face.attributes.emotion;
            var emotionText = face.expression + ".png";

            var index = parseInt((FaceCount - faceCount)/2 + i + 1);
            console.log("face index " + index )
            $('#transition-' + index).show();
            $('#transition-' + index).attr('src',ResUrl + face.face_photo);
            $('#transition-' + index).addClass('animated bounceIn ');

            $('#imgMood'+  index).show();
            $('#imgMood' + index).attr('src',ResImgUrl + emotionText);
            $('#imgMood' + index).addClass('animated fadeInUp ');

        }

        var flashArrowCount = 0;
        flashArrowInterval = setInterval(function () {

            for(var i = 0 ; i < faceCount ; ++i) {
                var index = parseInt((FaceCount - faceCount) / 2 + i + 1);

                if (flashArrowCount == 0) {
                    console.log("arrow face index " + index);
                    $('#imgArrowDown' + index).css("visibility", "visible");
                    $('#imgArrowDown' + index).attr('src', ResImgUrl + "arrow-down.png");
                    $('#imgArrowDown' + index).addClass('animated fadeIn');
                }

                else {
                    console.log("arrow flash face index  " + index);
                    if (flashArrowCount % 2 == 0) {
                        $('#imgArrowDown' + index).css("visibility", "visible");
                    }
                    else {
                        $('#imgArrowDown' + index).css("visibility", "hidden");
                    }
                }
                // else if (flashArrowCount == 6) {
                //     console.log("arrow up face index " + index);
                //     $('#imgArrowDown' + index).css("visibility", "hidden");
                //
                //     $('#imgArrowUp' + index).css("visibility", "visible");
                //     $('#imgArrowUp' + index).attr('src', ResImgUrl + "arrow-up.png");
                //     $('#imgArrowUp' + index).addClass('animated fadeIn');
                // }
                // else {
                //     console.log("arrow up flash face index  " + index);
                //     if (flashArrowCount % 2 == 0) {
                //         $('#imgArrowUp' + index).css("visibility", "visible");
                //     }
                //     else {
                //         $('#imgArrowUp' + index).css("visibility", "hidden");
                //     }
                // }
            }

            flashArrowCount++;

        },1000);

    });



    socket.on('disconnect', function() {
        console.log("The client has disconnected!");
    });

    function sendDisconnect() {
        socket.disconnect();
    }


    $("#divWaiting").hide();
    $("#divTransition").hide();
    $("#divTransitionFinish").hide();

//     $("#divWaiting").hide();
//     $("#divTransition").show();
//     $("#divTransitionFinish").show();


    var cdFaceCheck;
    var faceCheckCount = 0;
    function countdownFaceCheck(){

        clearInterval(cdFaceCheck);
        cdFaceCheck = setInterval(function(){
            faceCheckCount += 1;
            if(isProcessingFace == false){
                var jsonObject = {};
                socket.emit('face', jsonObject);
                isProcessingFace = true;
                faceCheckCount = 0;
            }

            if(faceCheckCount >=  7 && isProcessingFace){
                console.log("time out 10 round times , restart again")
                isProcessingFace = false;
            }

        },3000)
    }
    countdownFaceCheck();

    function initStat(stat){
        $('#divStat1').text("惊讶");
        $('#divStat2').text("高兴");
        $('#divStat3').text("平静");
        $('#divStat4').text("伤心");
        $('#divStat5').text("厌恶");
        $('#divStat6').text("生气");
        $('#divStat7').text("害怕");

        $('#textStat1').text(stat.surprise+"人");
        $('#textStat2').text(stat.happiness+"人");
        $('#textStat3').text(stat.neutral+"人");
        $('#textStat4').text(stat.sadness+"人");
        $('#textStat5').text(stat.disgust+"人");
        $('#textStat6').text(stat.anger+"人");
        $('#textStat7').text(stat.fear+"人");
    }




</script>
</body>
</html>